<template>
  <div class="list">
      <Breadcrumb></Breadcrumb>
      <div class="head">
        <div class="search">
            <el-form :inline="true" class="demo-form-inline">
                <el-form-item label="预定编号">
                  <el-input placeholder="填写编号" ref="pnameInput"></el-input>
                </el-form-item>
                <el-form-item label="预定时间">
                  <el-date-picker
                    type="date"
                    placeholder="选择日期">
                  </el-date-picker>
                </el-form-item>
                <el-form-item>
                  <el-button type="primary">查询</el-button>
              </el-form-item>
            </el-form>
        </div>
        <div class="managegoods">
          <el-row>
            <el-button @click="unionOrder" type="warning" size="small" icon="el-icon-s-data">订单汇总</el-button>
           
            <template>
              <download-excel
                class="downbtn"
                :data="downlist"
                :fields="json_fields"
                :name="moment(Date.now()).format('YYYY-MM-DD HH-mm-ss')+'订单列表.xls'"
              >
                 <el-button type="warning" size="small" icon="el-icon-download">导出</el-button>
              </download-excel>
            </template>
          </el-row>
        </div>
    </div>
    <div class="table">
      <el-table
          ref="multipleTable"
          :data="tableData"
          tooltip-effect="dark"
          style="width: 100%"
          border
          
          @selection-change="handleSelectionChange">
          
          <el-table-column
            type="selection"
            width="55"
            :selectable="selectable"
          >
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="code"
            label="订单编号"
            width="180">
            <template slot-scope="scope"><span @click="openDetail" style="color:blue;cursor:pointer">{{scope.row.code}}</span></template>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="ordername"
            label="下单人"
            width="120">
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="company"
            label="所属单位"
            show-overflow-tooltip>
          </el-table-column>
          <el-table-column
            align="center"
            header-align="center"
            prop="phone"
            label="联系电话"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            align="center"
            header-align="center"
            width="200"
            label="预定时间"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.yudingTime}}</template>
          </el-table-column>
           <el-table-column
            align="center"
            header-align="center"
            prop="price"
            label="订单总价格"
            show-overflow-tooltip>
          </el-table-column>
           <el-table-column
            align="center"
            header-align="center"
            label="汇总状态"
            show-overflow-tooltip>
            <template slot-scope="scope">{{ scope.row.huizongStatus}}</template>
          </el-table-column>
    </el-table>
    <div class="pagination">
      <Pagination :total="total" :layout="layout" :pageSize="pagesize" @getPageIndex="getPageIndex"></Pagination>
    </div>
    </div>
    <div class="detail">
      <Detail ref="detail"></Detail>
    </div>
  </div>
</template>

<script>
import moment from 'moment'
import Pagination from '@/components/Pagination' 
import Detail from '../Detail'
export default {
    components:{
      Pagination,
      Detail
    },
    data() {
      return {
        tableData: [],
        multipleSelection: [],
        total:1,
        pagesize:8,
        current:1,
        layout:'total,prev, pager, next',
        downlist:[],
        json_fields:{
          '订单编号':{
            field:'code',
            callback:value=>{
              return '&nbsp;'+value;
            }
          },
          '下单人':'ordername',
          '所属单位':'company',
          '联系电话':{
            field:'phone',
            callback:value=>{
              return '&nbsp;'+value;
            }
          },
          '预定时间':'yudingTime',
          '订单总价格':'price',
          '汇总状态':'huizongStatus'
        }
      }
    },
    mounted(){
      this.getOrderList(1);
    },
    methods: {
      moment,
      openDetail(){
        this.$refs.detail.drawer=true;
      },
      getPageIndex(current){
        console.log('222',current);
        this.current=current;
        this.getOrderList(current);
      },

      selectable(row, index){
        // console.log(row);
        if(row.huizongStatus!=='未汇总'){
          return false;
        }else
          return true;
      },
      async getOrderList(page=1){
        let res=await this.$api.getOrderList({page});
        console.log('订单列表',res);
        if(res.data.status===200){
          this.downlist=[];
          this.tableData=res.data.data;
          this.tableData.forEach((ele)=>{
            ele.huizongStatus=ele.huizongStatus===1?'未汇总':'已汇总';
            ele.yudingTime=moment(ele.yudingTime).format('YYYY-MM-DD HH:mm:ss');
          })
          this.downlist=this.tableData;
          this.total=res.data.total;
          this.pagesize=res.data.pageSize;
        }else{
          this.total=1;
          this.pagesize=8;
          this.tableData=[];
        }
      },
      unionOrder(){
        // console.log(this.multipleSelection);
        let arr=[];
        if(this.multipleSelection.length<2){
          this.$alert('请选择两项及以上订单', '汇总订单', {
          confirmButtonText: '确定',
          callback: () => {
            this.$message({
              type: 'info',
              message: '已取消汇总'
            });
          }
        });
        }else{
          this.multipleSelection.forEach((ele)=>{
          arr.push(ele.id);
          })
          let ids=arr.join(',');
          console.log(ids);
          this.changeOrderStatus(ids);
        }
        
      },
      async changeOrderStatus(ids){
        let res=await this.$api.changeOrderStatus({ids});
        console.log('汇总结果',res);
          if(res.data.status===200){
            this.getOrderList(this.current);
            this.$message({
            message: '汇总成功',
            type: 'success'
          });
          
        }
      },

      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(selection) {
        console.log(selection);
        this.multipleSelection=selection;
        this.downlist=selection;
      }
    }
  }
</script>

<style lang="less" scoped>
  .header-row-class{
    // text-align: center;
    color:#000;
  }
  .head{
    margin:15px;
    padding:15px;
    background-color: #fff;
    border-radius: 10px 10px 0 0;
    .search{
      
      border-bottom: 2px solid #ccc;
    }
    .managegoods{
      padding-top: 15px;
    }
  }
  .table{
    margin: 0 15px;
    .ptitle{
      // color:#000;
      cursor:pointer;
    }
    .ptitle:hover{
      color:rgb(7, 60, 135);
    }
  }
  .pagination{
    margin: 0 15px;
    position: fixed;
    // bottom:10px;
    bottom:15px;
    right:0;
    background-color: transparent;
  }
  .downbtn{
    margin-left: 20px;
    display: inline-block;
  }
</style>